<!--
 * @Description: File Description
 * @Author: jundie.cheng@hand-china.com
 * @version: H3.0
 * @Date: 2023-03-29 09:54:48
 * @LastEditTime: 2023-03-29 11:10:40
-->
<template>
  <view class="buy-filter-view">
    <view class="buy-filter-div">
      <view class="buy-box">
        <view class="buy-left">
          <image class="buy-img" :src="'/pages/appliance/static/ic_BIWD_Filter.png'"></image>
          <view class="buy-info">
            <view class="good-title">{{ $t('BIWD.BuyFilter.Title.Label') }}</view>
            <view class="good-des">{{ $t('BIWD.BuyFilter.Des.Text') }}</view>
          </view>
        </view>
        <TrackButton track-id="BIWD.BuyFilter.GoBuy.Button" :type="TrackType.ApplianceDetail">
          <view class="buy-right" @click="showBuyPop">{{ $t('BIWD.BuyFilter.GoBuy.Button') }}</view>
        </TrackButton>
      </view>
      <view class="buy-box">
        <view class="buy-left">
          <image class="buy-img" :src="'/pages/appliance/static/ic_BIWD_FilterGuide.png'"></image>
          <view class="buy-info">
            <view class="good-title">{{ $t('BIWD.filterReplaceGuide.Title.Label') }}</view>
            <view class="good-des">{{ $t('BIWD.filterReplaceGuide.Des.Text') }}</view>
          </view>
        </view>
        <TrackButton track-id="BIWD.filterReplaceGuide.GoCheck.Button" :type="TrackType.ApplianceDetail">
          <view class="buy-right" @click="goCheck">{{ $t('BIWD.filterReplaceGuide.GoCheck.Button') }}</view>
        </TrackButton>
      </view>
    </view>
    <Drawer :title="$t('BIWD.BuyFilter.Dialog.Title')" :show="buyPopFlag" @close="hideBuyPop" alignment="left">
      <view class="select-filter-box">
        <view class="select-filter select-filter-one">
          <view
            class="notyfy-tips"
            v-if="filter1Usage <= 5 && !isOffline"
            :style="{ backgroundColor: filterElementTipColorLeft }"
            >{{ filterElementTipLeft }}</view
          >
          <view class="filter-info">{{ $t('BIWD.BuyFilter.Dialog.FilterOne.Label') }}</view>
          <TrackButton
            :track-id="'go_to_buy'"
            :track-data="{ filter_number: 'BIWD.BuyFilter.Dialog.FilterOne.Button' }"
            :type="TrackType.ApplianceDetail"
          >
            <view class="filter-checked" @click="gotoBuy(1)">{{ $t('BIWD.BuyFilter.Dialog.FilterOne.Button') }}</view>
          </TrackButton>
        </view>
        <view class="select-filter">
          <view
            class="notyfy-tips"
            v-if="filter2Usage <= 10 && !isOffline"
            :style="{ backgroundColor: filterElementTipColorRight }"
            >{{ filterElementTipRight }}</view
          >
          <view class="filter-info">{{ $t('BIWD.BuyFilter.Dialog.FilterTwo.Label') }}</view>
          <TrackButton
            :track-id="'go_to_buy'"
            :track-data="{ filter_number: 'BIWD.BuyFilter.Dialog.FilterTwo.Button' }"
            :type="TrackType.ApplianceDetail"
          >
            <view class="filter-checked" @click="gotoBuy(2)">{{ $t('BIWD.BuyFilter.Dialog.FilterTwo.Button') }}</view>
          </TrackButton>
        </view>
      </view>
    </Drawer>
  </view>
</template>
<script setup lang="ts">
import Drawer from '@/common/drawer.vue'
import type { BIWDController } from '@/controller/BIWD/definition'
import { jumpMP, toPage } from '@/utils/mpHelper'
import { statusList1, statusList2 } from './filterStatusList'
import TrackButton from '@/dataReport/components/TrackButton.vue'
import { TrackType } from '../../../dataReport/tracks'
const props = defineProps<{
  control: BIWDController.Control
  brand: string
  vib: string
  isOffline: boolean
}>()
const { store } = props.control

const filter1Usage = computed(() => store.filter1Usage)
const color1Index = computed(() =>
  statusList1.findIndex((item) => filter1Usage.value <= item.max && filter1Usage.value >= item.min)
)
const filterElementTipLeft = computed(() => statusList1[color1Index.value].tip)
const filterElementTipColorLeft = computed(() => statusList1[color1Index.value].tipColor)

const filter2Usage = computed(() => store.filter2Usage)
const color2Index = computed(() =>
  statusList2.findIndex((item) => filter2Usage.value <= item.max && filter2Usage.value >= item.min)
)
const filterElementTipRight = computed(() => statusList2[color2Index.value].tip)
const filterElementTipColorRight = computed(() => statusList2[color2Index.value].tipColor)

const isSpecialSiemensVib = computed(() => ['WS5054BB1C', 'WS5053BB1C', 'WS5053BC1C', 'WS5054BC1C'].includes(props.vib))
const isSpecialBoschVib = computed(() => ['WBB6050B1C', 'WBB6050C1C'].includes(props.vib))

const buyPopFlag = ref(false)
function showBuyPop() {
  buyPopFlag.value = true
}
function hideBuyPop() {
  buyPopFlag.value = false
}
/**
 * 去购买
 * @param type
 */
function gotoBuy(type: number) {
  let path = ''
  let appId = ''
  if (props.brand == 'SIEMENS') {
    appId = 'wx00e2750add150103'
    if (type === 1) {
      if (isSpecialSiemensVib.value) {
        path = 'pages/integralShop/goodsDetailsCash/main?id=2981&utm_source=HC&utm_medium=SEBIRO'
      } else {
        path = 'pages/integralShop/goodsDetailsCash/main?id=1077&utm_source=HC&utm_medium=SEBIRO'
      }
    } else {
      if (isSpecialSiemensVib.value) {
        path = 'pages/integralShop/goodsDetailsCash/main?id=2982&utm_source=HC&utm_medium=SEBIPC'
      } else {
        path = 'pages/integralShop/goodsDetailsCash/main?id=1076&utm_source=HC&utm_medium=SEBIPC'
      }
    }
  } else {
    appId = 'wx9498873cd6c2028e'
    if (type === 1) {
      if (isSpecialBoschVib.value) {
        path = 'pages/integralShop/goodsDetailsCash/main?id=2983&utm_source=HC&utm_medium=BOBIRO'
      } else {
        path = 'pages/integralShop/goodsDetailsCash/main?id=1473&utm_source=HC&utm_medium=BOBIRO'
      }
    } else {
      if (isSpecialBoschVib.value) {
        path = 'pages/integralShop/goodsDetailsCash/main?id=2984&utm_source=HC&utm_medium=BOBIPC'
      } else {
        path = 'pages/integralShop/goodsDetailsCash/main?id=1472&utm_source=HC&utm_medium=BOBIPC'
      }
    }
  }
  jumpMP(appId, path, {}, 'Appliance.BIWD.BuyFilter')
}
/**
 * 去查看
 */
function goCheck() {
  if (isSpecialSiemensVib.value) {
    toPage(
      `/pages/appliance/BIWD/filterReplaceGuideSpecial/filterReplaceGuideSpecial?brand=${props.brand}&isSpecialSiemensVib=${isSpecialSiemensVib.value}&isSpecialBoschVib=${isSpecialBoschVib.value}`
    )
  } else {
    toPage(`/pages/appliance/BIWD/filterReplaceGuide/filterReplaceGuide?brand=${props.brand}`)
  }
}
</script>
<style lang="less">
.buy-filter-view {
  margin-top: 24rpx;
  font-family: 'PingFang SC';
  font-style: normal;
  .buy-filter-div {
    padding: 0 32rpx;
    .buy-box {
      width: 100%;
      height: 148rpx;
      background: #f4f4f6;
      margin-bottom: 24rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 34rpx 64rpx 32rpx 40rpx;
      .buy-left {
        display: flex;
        align-items: center;
        .buy-img {
          width: 52rpx;
          height: 52rpx;
          margin-right: 34rpx;
        }
        .buy-info {
          .good-title {
            font-weight: 600;
            font-size: 36rpx;
            line-height: 40rpx;
            color: var(--dark-color);
          }
          .good-des {
            font-weight: 400;
            font-size: 24rpx;
            color: var(--dark-color);
            opacity: 0.8;
            margin-top: 8rpx;
          }
        }
      }
      .buy-right {
        font-weight: 600;
        font-size: 28rpx;
        color: var(--primary-color);
        font-family: 'PingFang SC';
        font-style: normal;
      }
    }
  }
  .rawer-header-title {
    text-align: left;
  }
  .select-filter-box {
    margin-top: 20rpx;
    .select-filter-one {
      margin-bottom: 24rpx;
    }
    .select-filter {
      height: 148rpx;
      background: #f4f4f6;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 56rpx 0 24rpx;
      position: relative;
      box-sizing: border-box;
      .notyfy-tips {
        position: absolute;
        top: -10rpx;
        left: -6rpx;
        width: 86rpx;
        height: 32rpx;
        background-color: #ffaa00;
        font-weight: 600;
        font-size: 20rpx;
        color: var(--dark-color);
        text-align: center;
        line-height: 32rpx;
      }
      .filter-info {
        font-weight: 600;
        font-size: 36rpx;
        color: var(--dark-color);
      }
      .filter-checked {
        font-weight: 600;
        font-size: 28rpx;
        color: var(--primary-color);
      }
    }
  }
}
</style>
